<template>
  <div class="">
    <div :id="chartId" class="chart"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {};
  },
  props: ["chartId", "datas"],
  created(){
    this.$nextTick(()=>{
      this.$watch('datas',()=>{
        this.initChart();
      })
    })
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      let myChart = echarts.init(document.getElementById(this.chartId));
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "axis",
        },
        grid: {
          top: "6%",
          right: "6%",
          left: "8%",
          bottom: "16%",
        },

        xAxis: [
          {
            type: "category",
            axisLabel: {
              color: "#aaa",
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#333",
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "#333",
                type: "dashed",
              },
            },
            boundaryGap: false,
            data: this.datas.xPoint,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "",
            axisLine: {
              show: false,
              lineStyle: {
                color: "#ccc",
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#333",
                type: "dashed",
              },
            },
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: "#aaa",
              },
            },
          },
        ],
        series: [
          {
            name: "",
            type: "line",
            // smooth: true, //是否平滑
            // showAllSymbol: true,
            // symbol: 'circle',
            // symbolSize: 10,
            lineStyle: {
              normal: {
                color: "#4b9dff",
              },
            },
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "#fff",
              },
            },
            itemStyle: {
              color: "#fff",
              borderColor: "#4b9dff",
              borderWidth: 3,
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "RGBA(74, 155, 254, 0.5)",
                    },
                    {
                      offset: 1,
                      color: "RGBA(74, 155, 254, 0)",
                    },
                  ],
                  false
                ),
                shadowColor: "RGBA(74, 155, 254, 0.2)",
                shadowBlur: 20,
              },
            },
            data: this.datas.data,
          },
        ],
      });

      window.onresize = function () {
        // 自适应大小
        myChart.resize();
      };
    },
  },
};
</script>
<style scoped lang="scss">
.chart {
  height: 260px;
}
</style>
